import React, { useEffect } from 'react'
import { Layout } from 'antd'
import { Button, Menu, Dropdown } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import BodyLists from './Components/BodyLists'
// https://github.com/JohannesKlauss/react-hotkeys-hook
import { useHotkeys } from 'react-hotkeys-hook'
const { Header, Content } = Layout

function Navigator (props) {
  // 加入鼠标拖动 横向滚动
  useEffect(() => {
    window.linkOpen = true
    let oDiv = document.getElementById("scrollDiv")
    oDiv.onmousedown = function (event) {
      const ecx = event.clientX
      const osl = oDiv.scrollLeft
      window.linkOpen = true
      // console.info('event,', event)
      if (event.toElement.className !== "ant-input") {
        event.preventDefault()
        document.onmousemove = function (event) {
          oDiv.scrollLeft = osl + ecx - event.clientX
          const mouseDistance = Math.abs(ecx - event.clientX)
          if (mouseDistance > 10) {
            window.linkOpen = false
          }
        }
        document.onmouseup = function (event) {
          document.onmousemove = null
          document.onmouseup = null
          return false
        }
      }
    }
  }, [])

  useHotkeys('1', () => {
    props.onChange(0)
  })

  useHotkeys('2', () => {
    props.onChange(1)
  })

  // useHotkeys('esc', () => {
  //   console.info('esc')
  // })


  function handleMenuClick (e) {
    props.onChange(e.key)
  }

  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="0">1st item</Menu.Item>
      <Menu.Item key="1">2nd item</Menu.Item>
    </Menu>
  )
  const dropDown = (
    <span style={{ position: "absolute", right: "5px" }}>
      <Dropdown overlay={menu} >
        <Button>
          Actions <DownOutlined />
        </Button>
      </Dropdown>
    </span >
  )

  return (
    <Layout style={layoutStyle} className="layout">
      {/* <Header style={headerStyle}>Navigator {dropDown}</Header> */}
      <Content style={contentStyle} id="scrollDiv">
        <BodyLists pageData={props.pageData} />
      </Content>
    </Layout>
  )
}
export default Navigator

const headerStyle = {
  backgroundColor: "#6f777b",
  height: '40px',
  lineHeight: '40px',
  textAlign: 'center',
  color: '#b7bbbd',
}

const layoutStyle = {
  backgroundColor: '#838c91',
  height: '100%',
}

const contentStyle = {
  lineHeight: 0,
  padding: '8px',
  overflowX: 'auto',
}